highlightSearch() previously returned HTML strings that were injected via dangerouslySetInnerHTML, allowing attacker-controlled event/path names to render as executable markup in staff console rule builders. This change moves highlighting to safe React node composition and removes raw HTML injection at all affected render sites.

• Safe highlight rendering

  • Refactors highlightSearch(text, search, matchClassName?) to return React.ReactNode.
  • Replaces string HTML substitution with split-based rendering and explicit <strong> elements.
  • Ensures untrusted input is rendered as text, not interpreted as HTML.

• Rule builder call-site migration

  • Updates all affected renderers to consume highlightSearch(...) directly (no dangerouslySetInnerHTML):
    • RuleEventName.tsx
    • RuleOrganizationEventName.tsx
    • FilterRuleEdit.tsx
    • MemberConditionEdit.tsx
    • JourneyRuleEdit.tsx

• Focused regression coverage

  • Adds ui-utils.test.tsx to verify:
    • repeated match highlighting
    • safe handling of HTML-like payloads (no injected DOM nodes)
    • passthrough behavior when search is empty

export const highlightSearch = (
  text: string,
  search: string,
  matchClassName = "match",
): ReactNode => {
  if (!text || !search) return text ?? ""

  const parts = text.split(search)
  if (parts.length === 1) return text

  return parts.flatMap((part, index) =>
    index < parts.length - 1
      ? [part, <strong key={`${matchClassName}-${index}`} className={matchClassName}>{search}</strong>]
      : [part],
  )
}